<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>发布 - zzz的论坛</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/Community.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="/js/Community.js" type="application/javascript"></script>
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script>
        L2Dwidget.init({
            "model": {
                jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
                "scale": 1
            },
            "display": {
                "position": "right",
                "width": 100,
                "height": 200,
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 1,
                "opacityOnHover": 1
            }
        });
    </script>
    <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function ($) {
            $("body").click(function (e) {
                var a = new Array("佐田", "闪电五连鞭", "🐎老师，发生甚么事了", "给我发了几张截图"
                    , "耗子尾汁", "不要搞，窝里斗", "小聪明", "二百斤的嘤国大理石也折不动我的手指头",
                    "左刺拳", "左正蹬", "右鞭腿", "化劲", "接化发", "婷婷");
                var $i = $("<span/>").text(a[a_idx]);
                a_idx = parseInt(Math.random() * (13 - 0 + 1), 10);
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 9999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "#5bc0de"
                });
                $("body").append($i);
                $i.animate({
                        "top": y - 180,
                        "opacity": 0
                    },
                    1500,
                    function () {
                        $i.remove();
                    });
            });
        });
    </script>
</head>

<body>
<!--问题发布页面的导航栏设计-->
<div th:insert="~{navigation :: nav}"></div>

<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <h2><span class="glyphicon glyphicon-plus" aria-hidden="true">发布问题</span></h2>
            <form action="/publish" method="post">
                <input type="hidden" name="id" th:value="${id}">
                <!-- 写问题发布界面-->
                <div class="form-group">
                    <!--问题标题-->
                    <label for="title">问题标题：</label>
                    <input type="text" class="form-control" th:value="${title}" id="title" name="title"
                           autocomplete="off"
                           placeholder="问题标题……">
                </div>
                <div class="form-group">
                    <!--问题输入框，暂时未添加其他功能-->
                    <label for="title">补充(对问题的补充，必填，参考右侧说明)</label>
                    <textarea class="form-control" name="description" id="description" th:text="${description}"
                              cols="30" rows="10"></textarea>
                </div>
                <div class="form-group">
                    <!--添加标签，以逗号分隔开-->
                    <label for="title">添加标签：</label>
                    <input type="text" class="form-control" th:value="${tag}" id="tag" name="tag"
                           autocomplete="off"
                           placeholder="输入标签，以“-”分隔开"
                           onclick="showTag()">
                    <div id="select-tag" class="public-tag-tab">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" th:each="selectCategory,selectCategoryStat :${tags}"
                                th:class="${selectCategoryStat.first ? 'active ':''}">
                                <a th:href="${'#'+selectCategory.categoryName}" aria-controls="home"
                                   role="tab" data-toggle="tab" th:text="${selectCategory.categoryName}"></a>
                            </li>
                        </ul>
                        <div class="tab-content" >
                            <div role="tabpanel"  th:id="${selectCategory.categoryName}"
                                 th:each="selectCategory :${tags}"
                                 th:class="${selectCategoryStat.first ? 'active tab-pane tags':'tab-pane tags'}">
                                <!-- -->

                                <span class="label label-info tag" th:each="selectTag : ${selectCategory.tags}">
                                    <span class="glyphicon glyphicon-tags"></span>
                                    <span th:data-tag="${selectTag}" th:text="${selectTag}"
                                          onclick="selectTag(this)"></span>

                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-fluid main">
                    <div class="row">
                        <!--返回错误信息,如果没有错误正常发布则隐藏  th:if="${error != null }"-->
                        <div class="alert alert-danger col-lg-9 col-md-12 col-sm-12 col-xs-12 error-info" th:text="${error}"
                             th:if="${error != null }"></div>
                        <!-- submit按钮 -->
                        <button type="submit" class="btn btn-success btn-publish">确认发布</button>
                    </div>
                </div>

            </form>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <h3>问题发布指南</h3>
            ●问题标题：使用精简的语言描述想要发布的问题，不超过25个字。<br/>
            ●问题补充：详细补充您的问题内容，确保问题描述直观清晰(可提供一些相关资料)。<br/>
            ●问题标签：给你的问题选择一些标签，用 - 分隔开，每个标签不超过10个字。<br/>
        </div>
    </div>
</div>
</body>
</html>